<template>
  <!-- 弹框 -->
  <el-dialog
    :title="title"
    :visible.sync="outerVisible"
    class="Tbox"
    :close-on-click-modal="false"
    :append-to-body="internal"
    :width="width"
  >
    <slot></slot>
    <div slot="footer" class="dialog-footer" v-if="saveClick">
      <el-button @click="save" type="primary" :loading="loading">{{
        saveName
      }}</el-button>
      <el-button @click="close">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "Edialog",
  props: {
    // 是否显示dialog
    outershow: {
      type: Boolean,
      required: true,
    },
    // 标题
    title: {
      type: String,
      required: true,
      default: "标题",
    },
    // 保存按钮是否显示
    saveClick: {
      type: Boolean,
      default: false,
    },
    saveName: {
      type: String,
      default: "保 存",
    },
    // 宽度
    width: {
      type: String,
      default: "50%",
    },
    // 是否是内嵌
    internal: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    outershow(newVal) {
      this.outerVisible = newVal;
    },
    outerVisible(newVal) {
      if (!newVal) {
        this.close();
      }
    },
  },
  data() {
    return {
      info: null,
      loading: false,
      outerVisible: false,
    };
  },
  computed: {},
  methods: {
    close() {
      this.$emit("close");
    },
    save() {
      this.loading = true;
      this.info = this.$message({
        message: "保存中...",
        type: "info",
        duration: 0,
      });
      this.$emit("saveFn");
    },
    closeLoading() {
      this.info.close();
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.Tbox {
  ::v-deep .el-dialog {
    margin: 8vh auto !important;
    .el-dialog__header {
      border-bottom: 1px solid #ccc;
      text-align: left;
    }
    .el-dialog__body {
      padding: 30px 20px 20px !important;
    }
  }
}
.dialog-footer {
  padding-top: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
